<template>
    <div class="c-upload">
        <div class="c-upload__main">
            <div class="c-upload__status">
                <Icon type="checkmark-circled" v-show="status === 'success'"></Icon>
                <Icon type="close-circled" v-show="status === 'fail'"></Icon>
            </div>
            <i-input class="c-upload__input" v-model="filename" readonly></i-input>
            <i-button @click="handleSelect">选择文件</i-button>
        </div>
        <input type="file" style="display:none" ref="fileEl" @change="handleFileChange" v-if="fileCpt">
        <Progress v-show="uploading && progress" :percent="percent" :stroke-width="5" hide-info></Progress>
    </div>
</template>

<script>
import File from '../../libs/file.js'

export default {
  name: 'c-upload',
  props: {
    value: [Number, String, Object],
    progress: {
      type: Boolean,
      default: true
    },
    fileType: {
      type: String,
      default: 'img'
    },
    fileSize: {
      type: Number,
      default: 1
    },
    onlyFlag: {
      type: String,
      default: ''
    },
    isAlipay: { // 是否为支付宝分账专属
      type: Boolean,
      default: false
    },
    imgKey: { // 专为支付宝分账准备，imgKey为需要上传的key
      type: String,
      default: ''
    },
    branchId: { // 专为支付宝分账准备，branchId为门店id
      type: Number
    }
  },
  data () {
    return {
      fileCpt: true,
      percent: 0,
      filename: '',
      uploading: false,
      status: ''
    }
  },
  watch: {
    value (n) {
      // console.log(n);
      // 重置组件
      if (n === '') {
        this.filename = ''
        this.status = ''
      } else if (typeof n === 'object') {
        const { id } = n
        if (id === '') {
          this.filename = ''
          this.status = ''
        }
      }
    }
  },
  methods: {
    async handleFileChange (e) {
      try {
        const file = e.target.files[0]
        if (!file) return
        if (!File.isValidatedFile(file, this.fileType, this.fileSize, this)) return
        this.filename = file.name
        this.uploading = true
        const res = this.isAlipay === true ? await File.alipayUpload(file, this, {photo_type: this.imgKey, branch_id: this.branchId}) : await File.upload(file, this, this.onlyFlag)

        if (res.data && res.data.result && res.data.result[this.imgKey]) { // 为兼容支付宝分账上传文件
          this.$emit('input', res.data.result[this.imgKey])
        } else { // 为普通上传
          if (typeof this.value === 'object') {
            this.$emit('input', {
              id: res.id,
              name: res.name
            })
          } else {
            this.$emit('input', res.id)
          }
        }
        this.status = 'success'
      } catch (err) {
        this.status = 'fail'
        this.fileCpt = false
        this.$nextTick(() => {
          this.fileCpt = true
        })
      } finally {
        this.uploading = false
      }
    },

    setProgress (p) {
      this.percent = p
    },
    handleSelect () {
      this.status = ''
      this.percent = 0
      this.$refs.fileEl && this.$refs.fileEl.click()
    }
  }
}
</script>

<style lang="less">
.c-upload {
    .ivu-input {
        padding-left: 30px;
    }
    &__main {
        position: relative;
        display: flex;
    }

    &__status {
        z-index: 20;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        & .ivu-icon-checkmark-circled {
            color: green;
        }
        & .ivu-icon-close-circled {
            color: red;
        }
    }

    .ivu-btn {
        width: 150px;
    }

    &__input {
        margin-right: 10px;
    }
}
</style>